<template>
  <div class="coupontype">
          <swiper :options="swiperOption" class="swiper-box swiper-box-c">
              <swiper-slide class="swiper-item">
                 <volume :data="storeable" :info='info1'></volume>
              </swiper-slide>
              <swiper-slide class="swiper-item">
                 <volume :data="storeIsWillexpire" :info='info2'></volume>
              </swiper-slide>
              <swiper-slide class="swiper-item">
                 <volume :data="storexpired" :info='info3' :expiredClass="expired"></volume>
              </swiper-slide>
             <div class="swiper-pagination-c" :class="posL" slot="pagination"  ></div>
        </swiper>
        <div class="coupontype-zw"></div>
  </div>
</template>
<script>
  import {mapState} from 'vuex';
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import { storecoupon } from '@/service/getData'
  import Volume from './volume'
  import Vue from 'vue'
  var TAB_NAME = ['可使用', '即将过期','已失效'];
  var Info = ['目前没有可以使用的优惠券<p>请持续关注苏鲜生，获取更多的优惠信息</p>', '目前没有即将过期的优惠券','目前没有已失效的优惠券'];
  export default {
    data(){
      return{
          posL: '',
          storeable:[],
          storeIsWillexpire:[],
          storexpired:[],
          info1:'',
          info2:'',
          info3:'',
          expired: true,
          swiperOption: {
              pagination: '.swiper-pagination-c',
              paginationClickable: true,
              paginationBulletRender(swiper, index, className) {
                return  `<span class="${className} swiper-pagination-bullet-custom">${TAB_NAME[index]}</span>`;
              },
            
              onTransitionStart: swiper => {
                this.posL = 'active-'+swiper.realIndex;
              }
            }
      }
    },
    created(){

      this.init()
      this.$nextTick(() => {
        $('.coupontype').height($('.coupontype-zw').offset().top - $('.coupontype').offset().top)
        $('.swiper-box-c .swiper-wrapper .swiper-item').height(
           $('.coupontype-zw').offset().top-$('.swiper-box-c .swiper-wrapper').offset().top
        )
      })
    },
    watch:{
      $route(val, old){
          this.init();
      }
    },
    methods:{
        init(){

          TAB_NAME = ['可使用', '即将过期','已失效'];
          if(this.$route.params.type == 'store') {
            
            this.storecouponFn(1, '/app/coupon/queryCategoryCouponListInfo.do')
          
          } else {
              this.storecouponFn(1, '/app/coupon/querySnCouponListInfo.do')
          }
        },
        storecouponFn(num, url) {
            storecoupon({
              couponRemark: num,
              _: Math.random()+10000000,
              url: url
            })
            .then((rep) => {
              let data1 = rep.data || {};
              // if(!data1) return;

              var cl = data1.couponList || [];
              // if(cl && toString.call(cl) == "[object Array]") {
                if(cl.length >= 0 && num != 3) {
                    if(cl.length > 99) {
                      TAB_NAME[num-1] = TAB_NAME[num-1]+'99+' //暂时先大于5
                    }else {
                      TAB_NAME[num-1] = TAB_NAME[num-1]+'('+cl.length+')'
                    }
                } 
                this['info'+num] = Info[num-1]
                 
                 if(num == 1) {
                   $('.swiper-pagination-c span:nth-child(1)').text('可使用('+cl.length+')');
                 }
 
                 
                if(num == 1) {
                  this.storeable = cl
                  this.storecouponFn(2, url)
                }
                if(num == 2) {
                  this.storeIsWillexpire = cl
                  this.storecouponFn(3, url)
                }

                if(num == 3) {
                  this.storexpired = cl
                }
              // } 
            })
        }
    },
    components: {
      swiper,
      swiperSlide,
      Volume
    }
  }
</script>
<style lang="scss">
  @function _($px) {
        $rem: $px/50;
        @return #{$rem}rem;
   }
  .coupontype {
    overflow: hidden;
  }
  .swiper-box-c {
    height: 100% !important;
  }
  .swiper-box-c  .swiper-wrapper .swiper-item {
    overflow-y: auto
  }
  .coupontype-zw {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 0;
    z-index: 11;
  }
  .swiper-box-c .swiper-wrapper {
     top: _(80);
  }
  .swiper-pagination-c {
    position: absolute;
    top: 0;
    width: 100%;
    height: _(80);
  }
  .swiper-pagination-c span{
    width:33.33%; 
    height: _(80);
    line-height: _(80);
    font-size: _(26); 
    display:inline-block;
    margin:0 !important;
    background-color:#fff;
    border-radius: 0;
    opacity: 1 ;
    text-align: center;
    color:#444;
    letter-spacing: _(-0.16);
  }
  .swiper-pagination-c span.swiper-pagination-bullet-active {
    color:#ff782d;
  }

  .swiper-pagination-c:after {
    position: absolute;
    content: '';
    left: 7%;
    bottom: 0;
    width: _(143);
    height: _(4);
    background-color: #ff782d;
    transition: left 0.3s;
  }
  .swiper-pagination-c.active-1:after {
    left: 40%
  }
  .swiper-pagination-c.active-2:after {
    left: 73%
  }

  
</style>
<style lang="scss" scoped>
    @function _($px) {
        $rem: $px/50;
        @return #{$rem}rem;
   }

   .conpontype-tab {
      ul {
        background-color: #fff;
        overflow: hidden;

          li {
              float: left;
              width: 33.33%;
              text-align: center;
          }
      }
   }

</style>
